<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="header">
			<view class="back-icon" @click="goBack">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<text class="title">确认订单</text>
		</view>

		<!-- 服务类型切换 -->
		<view class="service-tabs">
			<view class="tab-item">预约服务</view>
			<view class="tab-item active">支付订单</view>
			<view class="tab-item">门店服务</view>
		</view>

		<!-- 店铺信息 -->
		<view class="shop-info">
			<view class="shop-name">
				<uni-icons type="location-filled" size="20" color="#333"></uni-icons>
				<text>{{ merchantInfo.name }}</text>
			</view>
			<view class="shop-address">{{ shopInfo.address }}</view>
		</view>

		<!-- 用户信息 -->
		<view class="user-info">
			<view class="user-name">
				<uni-icons type="contact-filled" size="20" color="#333"></uni-icons>
				<text>{{ userInfo.name }}</text>
			</view>
			<view class="user-phone">{{ userInfo.phone }}</view>
		</view>

		<!-- 预约按钮 -->
		<view class="appointment-btn">
			<view class="btn-content">
				<uni-icons type="calendar-filled" size="20" color="#333"></uni-icons>
				<picker class="input" mode="date" @change="bindDateChange">
					<text class="placeholder">{{ selectedDate || '请选择时间' }}</text>
				</picker>
				<!-- <uni-icons type="arrowright" size="16" color="#999"></uni-icons> -->
			</view>
		</view>

		<!-- 车辆信息 -->
		<view class="car-info">
			<view class="car-details">
				<uni-icons type="car-filled" size="20" color="#333"></uni-icons>
				<text>{{ carInfo.details }}</text>
				<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 服务产品列表 -->
		<view class="service-products">
			<view class="section-header">
				<text>服务产品</text>
				<text class="total">共选择{{ selectedServices.length }}项服务产品</text>
			</view>

			<view class="product-list">
				<view class="product-item" v-for="(product, index) in selectedServices" :key="index">
					<text class="product-name">{{ product.name }}</text>
					<text class="product-price">¥ {{ product.price }}</text>
				</view>
			</view>
		</view>

		<!-- 优惠券信息 -->
		<view class="coupons-info">
			<view class="coupons-content">
				<text>代金券/优惠券</text>
				<view class="coupons-status">
					<text>{{ couponsStatus }}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 备注信息 -->
		<view class="notes-info">
			<view class="notes-header">备注信息</view>
			<textarea class="notes-input" placeholder="请输入备注信息" v-model="notes" />
		</view>

		<!-- 底部金额和提交按钮 -->
		<view class="bottom-bar">
			<view class="total-amount">
				<text>合计：</text>
				<text class="amount">¥ {{ totalPrice }}</text>
			</view>
			<button class="submit-btn" @click="submitOrder">提交订单</button>
		</view>

		<!-- 客服按钮 -->
		<view class="customer-service" @click="contactService">
			<uni-icons type="headphones-filled" size="24" color="#333"></uni-icons>
			<text>联系客服</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
	// import uniDataPicker from '@dcloudio/uni-ui/lib/uni-data-picker/uni-data-picker.vue';

	const couponsStatus = ref('暂无');
	const notes = ref('');
	const appointmentDate = ref('');
	const appointmentText = ref('立即预约');
	// 获取今天的日期
	const today = new Date().toISOString().split('T')[0];
	const startDate = ref(today);
	const selectedDate = ref()
	// 设置结束日期为一年后
	const endDate = ref(new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString().split('T')[0]);
	const bindDateChange = (e) => {
		selectedDate.value = e.detail.value
	}
	// 数据变量
	const shopInfo = ref({
		name: '伟业汽车维修厂(人民路店)',
		address: '山阳区人民中路32号'
	});

	const userInfo = ref({
		name: 'admin',
		phone: '18895039309'
	});

	const carInfo = ref({
		details: '奔驰FWE4/豫A98FHJ'
	});
	// 获取从第一个页面传递过来的服务信息
	const selectedServices = ref([]);
	const merchantInfo = ref({
		id: '',
		name: ''
	});
	const totalPrice = ref(0)
	const userId = ref(0)
	onMounted(() => {
		// 从本地存储中获取数据
		const cartData = uni.getStorageSync('selectedServices');
		if (cartData) {
			selectedServices.value = cartData.services;
			merchantInfo.value.id = cartData.merchantId;
			merchantInfo.value.name = cartData.merchantName;
			totalPrice.value = cartData.totalPrice
		}


		function getuser() {
			uni.getStorage({
				key: 'userId',
				success: function(res) {
					console.log('获取的数据:', res);
					userId.value = res.data
					console.log(userId.value)
				},
				fail: function(err) {
					console.error('获取数据失败', err);
				}
			});
		}
		getuser()
	});

	// 方法
	const goBack = () => {
		uni.navigateBack();
	};

	const onDateChange = (e) => {
		appointmentDate.value = e.detail.value;
		appointmentText.value = `${e.detail.value} 已选择`;
	};

	const onDateInput = (e) => {
		appointmentDate.value = e.detail.value;
	};

	const submitOrder = () => {
		// 提交订单逻辑
		console.log('提交订单');
	};

	const contactService = () => {
		// 联系客服逻辑
		console.log('联系客服');
	};
</script>

<style scoped>
	/* 全局样式 */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* 导航栏样式 */
	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		padding: 0 15px;
		background-color: #fff;
		position: relative;
	}

	.back-icon {
		position: absolute;
		left: 15px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	/* 服务类型切换 */
	.service-tabs {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.tab-item {
		padding: 5px 0;
		font-size: 14px;
		color: #666;
	}

	.tab-item.active {
		color: #007aff;
		font-weight: bold;
		border-bottom: 2px solid #007aff;
	}

	/* 店铺信息 */
	.shop-info {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.shop-name {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.shop-name text {
		margin-left: 5px;
		font-size: 16px;
		font-weight: bold;
	}

	.shop-address {
		color: #666;
		font-size: 14px;
	}

	/* 用户信息 */
	.user-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.user-name {
		display: flex;
		align-items: center;
	}

	.user-name text {
		margin-left: 5px;
		font-size: 16px;
	}

	.user-phone {
		font-size: 16px;
		color: #333;
	}

	/* 预约按钮 */
	.appointment-btn {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.btn-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn-content text {
		margin-left: 5px;
		font-size: 16px;
	}

	/* 车辆信息 */
	.car-info {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.car-details {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.car-details text {
		margin-left: 5px;
		font-size: 16px;
	}

	/* 服务产品列表 */
	.service-products {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.total {
		color: #999;
		font-size: 14px;
	}

	.product-list {
		margin-top: 5px;
	}

	.product-item {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.product-name {
		font-size: 15px;
		color: #333;
	}

	.product-price {
		color: #ff6b6b;
		font-size: 15px;
	}

	/* 优惠券信息 */
	.coupons-info {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.coupons-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.coupons-status {
		display: flex;
		align-items: center;
		color: #999;
		font-size: 14px;
	}

	/* 备注信息 */
	.notes-info {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.notes-header {
		margin-bottom: 10px;
		font-size: 16px;
		color: #333;
	}

	.notes-input {
		width: 100%;
		height: 100px;
		border: 1px solid #eee;
		padding: 10px;
		font-size: 14px;
	}

	/* 底部金额和提交按钮 */
	.bottom-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 15px;
		border-top: 1px solid #eee;
	}

	.total-amount {
		font-size: 16px;
	}

	.amount {
		color: #ff6b6b;
		font-weight: bold;
		margin-left: 5px;
	}

	.submit-btn {
		background-color: #ff6b6b;
		color: #fff;
		border: none;
		padding: 8px 20px;
		border-radius: 4px;
	}

	/* 客服按钮 */
	.customer-service {
		position: fixed;
		bottom: 20px;
		left: 20px;
		display: flex;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 8px 12px;
		border-radius: 50%;
	}

	.customer-service text {
		color: #fff;
		font-size: 12px;
		margin-left: 5px;
	}
</style>